<template>
    <div id="admin">
        <div class="g-container" >
            <div class="g-top">
                <h5 class="ele-title">
                    <img src="../assets/images/logo-head.png" alt="" ref="ad">
                </h5>
                <top-navbar class="top-navbar"></top-navbar>
            </div>
            <div class="g-row">
                <div class="g-col col-nav">
                    <VuePerfectScrollbar class="scroll-area" :settings="settings">
                        <navbar class="navbar"></navbar>
                    </VuePerfectScrollbar>
                </div>
                <div class="g-col col-main">
                    <keep-alive>
                        <router-view class="g-view"></router-view>
                    </keep-alive>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import navbar from "@/components/navbar.vue";
import topNavbar from "@/components/TopNavbar.vue";
import VuePerfectScrollbar from "vue-perfect-scrollbar";
import cookie from "js-cookie";
import axo from "@/assets/js/axo";
import {
    mapGetters,
    mapActions
} from "vuex";
import { getTokenId } from '@/assets/js/utils';
export default {
    name: "app",
    data () {
        return {
            settings: {
                wheelSpeed: 0.5,
                swipeEasing: false
            }
        };
    },
    methods: {
        ...mapActions([ // 加载需要用到在actions绑定的方法
            "checkIsLogin",
            "keepSysUser",
            "keepUserAuth",
            "keepTokenId"
        ])
    },
    computed: {
        ...mapGetters([ // 加载从getters上绑定的状态值
            "isLogin",
            "sysUser"
        ])
    },
    components: {
        navbar,
        topNavbar,
        VuePerfectScrollbar
    },
    mounted () {
        // 防止刷新后vuex信息清空，用cookie的信息重新写入
        if(cookie.getJSON('sysUser')){
            this.keepSysUser(cookie.getJSON('sysUser'));
            this.keepUserAuth(JSON.parse(sessionStorage.getItem('list')));
            this.keepTokenId(getTokenId());
        }else{
            this.$router.replace('/login');
        }
    },
    created () {
        // console.log("admin created");
    }
};
</script>

<style lang="scss">

#admin {
    position: relative;
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width:100%;
    height: 100%;
    .g-container{
        width:100%;
        height: 100%;
        min-width: 1280px;
        overflow: hidden;
        .g-row{
            box-sizing: border-box;
            padding-top: 80px;
            width:100%;
            height: 100%;
            flex: 1;
            display: flex;
            .col-main{
                flex: 1;
                // margin-bottom: 80px;
                overflow: auto;
            }
        }
        .g-view{
            padding-bottom:50px;
        }
        .col-nav{
            background-color: #fff;
            border-right: 2px solid rgba(238, 241, 247, 0.85);
            box-shadow: 3px 3px 4px 3px rgba(252, 247, 247, 0.85);
            .scroll-area {
                position: relative;
                margin: auto;
                width: 180px;
                height: 100%;
            }
        }
    }
}
.g-top{
    display: flex;
    position: fixed;
    background-color: #fff;
    z-index: 99;
    width: 100%;
    top: 0;
    border-bottom: 1px solid #eef1f6;
    .ele-title {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        width: 180px;
        img{
            width: 120px;
        }
    }
    .top-navbar{
        flex: 1;
    }
}
</style>
